<template>
  <div class="dashboard-container">
    <div class='app-container'>
    <el-card>
      <!-- form表单部分 -->
      <el-form label-width="80px" ref="formData" :model="formData">
        <el-row>
          <el-col :span="6">
            <el-form-item label="标签名称" prop="tags">
          <el-input style="width:100%" placeholder="请输入" v-model="formData.tags"></el-input>
        </el-form-item>
          </el-col>
        <el-col :span="6">
          <el-form-item label="城市" prop="province" >
          <el-select style="width:100%" placeholder="请选择" v-model="formData.province" :filterable="true" @focus="getProvinceList" @change="getCityList">
            <el-option  v-for="(item,index) in provinceList"
          :key="index"
          :value="item" />
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地区" prop="city">
          <el-select style="width:100%" placeholder="请选择" v-model="formData.city">
            <el-option  v-for="(item,index) in cityList"
          :key="index"
          :label="item"
          :value="item" />
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
          <el-input style="width:100%" placeholder="请输入" v-model="formData.shortName"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
          <el-select style="width:100%" placeholder="请选择" v-model="formData.state">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-button size="small" @click="clear">清除</el-button>
          <el-button size="small" type="primary" @click="search">搜索</el-button>
          </el-col>
          <el-row type="flex" justify="end">
            <el-button type="success" size="small" @click="add"><i class="el-icon-edit"></i> 新增用户</el-button>
          </el-row>
        </el-row>
      </el-form>
      <!-- alert消息提示 -->
      <el-alert
    :title="`共${ total }条记录`"
    type="info"
    show-icon
    :closable="false">
  </el-alert>
  <!-- 表格部分 -->
  <el-table
      :data="companysData"
      style="width: 100%"
      stripe
      highlight-current-row
      v-loading="loading" element-loading-text="正在加载中" >
      <el-table-column
        prop="id"
        label="序号"
        align="center">
      </el-table-column>
      <el-table-column
        prop="number"
        label="企业编号"
        align="center">
      </el-table-column>
      <el-table-column
        prop="shortName"
        label="企业简称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签"
        align="center">
      </el-table-column>
      <el-table-column
        prop="creatorID"
        label="创建者"
        align="center">
        <template slot-scope="{row}">
          {{ row.creatorID === 2 ? '超级管理员' : 'creatorID' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期"
        align="center">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        align="center">
      </el-table-column>
      <el-table-column
        prop="state"
        :formatter="formatState"
        label="状态"
        align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="150">
      <template slot-scope="{ row }">
        <el-button plain type="primary" icon="el-icon-edit"  size="small" circle @click="edit(row.id)" :disabled="row.state === 0" ></el-button>
        <el-button plain :type="row.state === 0 ? 'success' : 'warning'" :icon="row.state === 0 ? 'el-icon-check' : 'el-icon-close'" size="small" circle @click="changeState(row)"></el-button>
        <el-button plain type="danger" icon="el-icon-delete" size="small" circle @click="del(row.id)" :disabled="row.state === 0"></el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- 分页器 -->
  <el-row type="flex" justify="end" align="middle" style="height: 60px">
    <el-pagination
      background
      :page-sizes="[10, 20, 30, 50]"
      :page-size="formData.pagesize"
      :current-page="formData.page"
      @current-change="changePage"
      @size-change="sizeChange"
      :total="total"
      layout="prev, pager, next, sizes,jumper"
      >
    </el-pagination>
  </el-row>
    </el-card>
    <!-- 添加企业弹窗 -->
    <company-add :show-dialog.sync="showDialog" :addOredit="addOredit" ref="companyForm" />
  </div>
  </div>

</template>

<script>
import moment from 'moment'
// 导入城市函数
import { provinces, citys } from '@/api/hmmm/citys.js'
// 引入获取企业列表
import { list, disabled, detail, remove } from '@/api/hmmm/companys1.js'
// 引入枚举数据
import { status } from '@/api/hmmm/constants.js'
// 引入添加企业组件
import CompanyAdd from '../components/companys-add1.vue'
export default {
  name: 'Companys',
  components: {
    CompanyAdd
  },
  data () {
    return {
      // 顶部表单数据
      formData: {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      },
      // 总条数
      total: 0,
      // 存城市数据
      provinceList: [],
      // 存地区数据
      cityList: [],
      // 企业列表数据
      companysData: [
        {
          id: '',
          number: '', // 编号
          shortName: '', // 简称
          tags: '', // 标签
          creatorID: '', // 创建者
          addDate: '', // 创建日期
          remarks: '', // 备注
          state: '' // 状态
        }
      ],
      // 定义变量控制遮罩层
      loading: false,
      // 控制弹层的显示与隐藏
      showDialog: false,
      // 设置变量，控制弹层的标题
      addOredit: true
    }
  },
  created () {
    this.getCompanyDataList()
  },
  methods: {
    // 获取城市列表
    getProvinceList () {
      this.provinceList = provinces()
    },
    // 获得地区列表
    getCityList (val) {
      this.cityList = citys(val)
      this.formData.city = this.cityList[0]
    },
    // 获取企业列表数据
    async getCompanyDataList () {
      this.loading = true
      const { data } = await list(this.formData)
      this.total = data.counts
      data.items.forEach(item => { item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss') })
      this.companysData = data.items
      this.loading = false
    },
    // 格式化状态
    formatState (row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = status.find(item => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    // 当前页数改变
    changePage (newPage) {
      this.formData.page = newPage
      this.getCompanyDataList()
    },
    // 手动选择，当前显示多少条一页
    sizeChange (newPagesize) {
      this.formData.pagesize = newPagesize
      this.getCompanyDataList()
    },
    // 修改状态
    async changeState (row) {
      const confrimResult = await this.$confirm(`已成功${row.state === 0 ? '启用' : '禁用'}，是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (confrimResult !== 'confirm') {
        return this.$message.info('您取消了操作')
      }
      try {
        // 修改状态接口
        await disabled({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        // 拉数据重新渲染
        this.getCompanyDataList()
        this.$message.success(`${row.state === 0 ? '启用' : '禁用'}成功!`)
      } catch (err) {
        //
      }
    },
    // 点击新增用户
    add () {
      this.addOredit = true
      this.showDialog = true
    },
    // 点击编辑图标，打开弹窗
    async edit (id) {
      // 获取企业详情
      const { data } = await detail(id)
      this.$refs.companyForm.companyAddData = data
      this.addOredit = false
      this.showDialog = true
    },
    // 点击删除
    async del (id) {
      // 消息提示确认删除么
      await this.$confirm('此操作将永久删除用户，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // 调删除接口
      await remove(id)
      // // 重拉数据渲染
      // this.getCompanyDataList()
      // 考虑当前页删完后，渲染前一页的边界行为
      const { data } = await list(this.formData)
      if (data.items.length === 0 && this.formData.page > 1) {
        this.formData.page--
        this.getCompanyDataList()
      } else {
        data.items.forEach(item => { item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss') })
        this.companysData = data.items
        this.total = data.counts
      }
      // 消息提示
      this.$message.success('删除成功！')
    },
    // 点击搜索
    search () {
      // 调用获取企业列表方法
      this.getCompanyDataList(this.formData)
      // 调清除方法
      this.clear()
    },
    // 点击清除
    clear () {
      // 清空表单
      this.formData = {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-alert {
  margin: 20px 0;
}
</style>
